<template>
  <div class="app-container">
    <el-transfer
      filterable
      :filter-method="filterMethod"
      :props="{
        key: 'id',
        label: 'comment',
        name: 'comment',
      }"
      v-model="form.tableIdList"
      :data="tableList"
      :titles="['所有信息集', '已选择信息集']"
      @change="handleChange"
      style="text-align: left; display: inline-block"
    ></el-transfer>
  </div>
</template>
  
  <script>
import { selectQueryTables, getQueryTables } from "@/api/sysQueryTable";
import { getTableList } from "@/api/sysTable";

export default {
  props: ["id"],
  data() {
    return {
      tableList: [],
      form: {
        id: this.id,
        tableIdList: [],
      },
    };
  },
  mounted() {
    this.handleQuery();
  },
  methods: {
    handleQuery() {
      getTableList().then((res) => {
        if (res && res.code === 20000) {
          this.tableList = res.data;
        }
      });
      getQueryTables(this.form.id).then((res) => {
        if (res && res.code === 20000) {
          if (res.data) {
            res.data.forEach((el) => {
              this.form.tableIdList.push(el.tableId);
            });
          }
        }
      });
    },
    handleChange(val) {
      selectQueryTables(this.form).then((res) => {
        if (res && res.code === 20000) {
          this.form.tableIdList = val;
        }
      });
    },
    filterMethod(query, item) {
      return item.comment.indexOf(query) > -1;
    },
  },
  mounted() {
    this.handleQuery();
  },
};
</script>
  <style scoped>
.el-transfer /deep/ .el-transfer-panel__list.is-filterable {
  height: 500px;
}

.el-transfer /deep/ .el-transfer-panel__body {
  height: 500px;
}
</style>
  